<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .relative-div1 {
            margin: 10px;
            width: 100px;
            height: 100px;
            background-color: #ea29ff;
            position: relative;
            top: 100px;
            left: 100px;
        }

        .relative-div2 {
            width: 100px;
            height: 100px;
            background-color: #00FF00;
        }

        .absoulte-div1 {
            width: 100px;
            height: 100px;
            background-color: #edff2a;
            position: absolute;
            left: 50px;
            top: 20px;
        }

        .absoulte-div2 {
            width: 100px;
            height: 100px;
            background-color: #462cff;
        }

        /*哈根达斯案例*/
        .hgds {
            padding: 12px;
            width: 310px;
            height: 190px;
            margin: 0 auto;
            border: 1px solid #CCC;
            position: relative;
        }

        .img1 {
            /*不占有位置还可以改变偏移量*/
            position: absolute;
            left: 0;
            top: 0;
        }

        .img2 {
            position: absolute;
            right: 0;
            bottom: 0;
        }

    </style>
</head>
<body>
<!--元素的定位属性主要包括定位模式和边偏移两部分,浮动是为了让块级元素在一行显示，定位的作用就是让盒子出现在我们想要的位置上-->
<!--定位分静态定位static默认方式没有偏移属性，一般用于在使用其他定位后要取消定位、相对定位relative、绝对定位absolute-->
<!--元素添加定位之后都会浮动起来盖在其他元素之上，只是占或不占位置的区别-->

<!--相对定位：通过偏移量改变位置但是其原有位置仍然保留-->
<div class="relative-div1"></div>
<div class="relative-div2"></div>
<!--绝对定位：相当于父元素绝对定位，脱离文档流，不占用原有位置，使用绝对定位后元素会网上找带有定位属性的父元素，如果找到则相对该元素便宜如果没找着则相对屏幕便宜-->
<!--所以子元素为了使用定位而且不遮住其他元素使用绝对定位，父元素为了不影响文档流还管理子元素所以使用相对定位占位置-->
<div class="absoulte-div1"></div>
<div class="absoulte-div2"></div>
<!--哈根达斯案例-->
<div class="hgds">
    <!--图片要在左上角显示，此处不可以使用浮动，因为父元素使用了padding，子元素无法穿过padding-->
    <!--元素设置浮动后，下一个元素会占用浮动元素位置而被盖住，但是文字等内容不会被盖住留在了盒子下面，所以使用浮动后属于不完全脱标，而绝对定位是完全脱标所以此处使用浮动adv.jpg也不会浮动上去-->
    <img src="../image/top_tu.gif" class="img1">
    <img src="../image/br.gif" class="img2">
    <img src="../image/adv.jpg">
</div>
</body>
</html>